<template>
  <el-form  ref="powerForm" size="large" :rules="rules" :model="form">
        <el-form-item label="权限名" prop="powerName">
          <el-input  v-model="form.powerName"></el-input>
        </el-form-item>
        <el-form-item label="权限路径" prop="powerPath">
          <el-input  v-model="form.powerPath"></el-input>
        </el-form-item>
    <el-row  justify="center">
      <el-col :span="3"><el-button type="primary" @click="submitForm($refs.powerForm)">保存</el-button></el-col>
      <el-col :span="3"><el-button @click="closeForm">关闭</el-button></el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {addPower, editPower} from '../../../request/system/PowerApi.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
const insert=ref(true)
const form =reactive({
        powerNo:'',
        powerName:'',
        powerPath:''
})
const rest=(isInsert)=>{
  insert.value=isInsert
    powerForm.value.resetFields()
}
const powerForm=ref()
const fillForm=(row)=>{
  console.log(row)
  rest(false)
    form.powerNo= row.powerNo
    form.powerName= row.powerName
    form.powerPath= row.powerPath
}

const emits = defineEmits(['closePowerForm','submitPowerForm']);
const closeForm=()=>{
    emits("closePowerForm")
}
const rules=reactive({
        powerName:[
          {
            required: true,message:"权限名不能为空",trigger:'blur'
          }
        ]
          ,
})

const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      if(insert.value){
        addPower(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("新增成功")
            emits("submitPowerForm")
          }
        })
      }else {
        editPower(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("修改成功")
            emits("submitPowerForm")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ rest,fillForm })
onMounted(()=>{


})
</script>
<style scoped>

</style>
